<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes" >
		<title>Form widgets mobile test page</title>

		<link href="../../icons/commonIcons.css" rel="stylesheet">

		<script type="text/javascript" src="../boilerplate.js"></script>

		<script language="JavaScript" type="text/javascript">
			require([
				"dojo/parser",

				"dijit/form/Button",
				"dijit/form/DropDownButton",
				"dijit/form/ComboButton",
				"dijit/form/ToggleButton",
				"dijit/DropDownMenu",
				"dijit/MenuItem",

				"dijit/form/CheckBox",
				"dijit/form/RadioButton",

				"dijit/form/ValidationTextBox",
				"dijit/form/DateTextBox",
				"dijit/form/TimeTextBox",
				"dijit/form/NumberSpinner",

				"dijit/form/FilteringSelect",
				"dijit/form/Select",
				"dijit/form/MultiSelect",

				"dijit/form/HorizontalSlider",
				"dijit/form/HorizontalRule",
				"dijit/form/HorizontalRuleLabels",
				"dojo/domReady!"
			], function(parser){
				parser.parse();
			});
		</script>
	</head>
	<body>
		<h1>Buttons</h1>
		<button data-dojo-type="dijit/form/Button" id="T1465" data-dojo-props='onClick:function(){ console.log("clicked simple"); }, iconClass:"plusIcon", value:"Create"'>
			Button
		</button>
		<button id="SubmitDropDown" data-dojo-type="dijit/form/DropDownButton" name="DropDown" type="submit" value="DropDown Submit"
				data-dojo-props="label: 'DropDown Submit'">
			DropDownButton
			<span data-dojo-type="dijit/DropDownMenu">
				<span id="SubmitDropDownMenuItem" data-dojo-type="dijit/MenuItem">DropDown MenuItem</span>
			</span>
		</button>
		<button id="comboCreate" title="creative title" data-dojo-type="dijit/form/ComboButton" data-dojo-props='optionsTitle:"save options", onClick:function(){ console.log("clicked combo save") },
				iconClass:"plusIcon"'>
			<span>ComboButton</span>
			<span id="createMenu" data-dojo-type="dijit/DropDownMenu">
				<span data-dojo-type="dijit/MenuItem"  data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconSave",
					onClick:function(){ console.log("not actually saving anything, just a test!"); }'>Create blank</span>
				<span data-dojo-type="dijit/MenuItem"
					data-dojo-props='onClick:function(){ console.log("not actually saving anything, just a test!"); }'>Create from template</span>
			</span>
		</button>
		<button id="toggle2" data-dojo-type="dijit/form/ToggleButton"
			data-dojo-props='onChange:function(val){ console.log("toggled button checked="+val); }, iconClass:"dijitRadioIcon"'>
			Toggle me
		</button>

		<h1>CheckBox, RadioButton</h1>
		<fieldset>
			<legend>check boxes</legend>
			<label for="cb1">cb1:</label>
			<input id="cb1" data-dojo-id="cb1" data-dojo-type="dijit/form/CheckBox"
				   name="cb" value="foo" onClick="console.log('clicked cb1');">
			<label for="cb2">cb2</label>
			<input id="cb2" data-dojo-id="cb2" data-dojo-type="dijit/form/CheckBox"
				   name="cb" value="bar" onClick="console.log('clicked rb2');">
		</fieldset>
		<fieldset>
			<legend>radio buttons</legend>
			<label for="rb1">rb1</label>
			<input id="rb1" data-dojo-id="rb1" data-dojo-type="dijit/form/RadioButton"
				   name="rb" value="foo" onClick="console.log('clicked rb1');">
			<label for="rb2">rb2</label>
			<input id="rb2" data-dojo-id="rb2" data-dojo-type="dijit/form/RadioButton"
				   name="rb" value="foo" onClick="console.log('clicked rb2');">
		</fieldset>

		<h1>TextBoxes</h1>
		<label for="vtb">ValidationTextBox:</label>
		<input id="vtb" data-dojo-type="dijit/form/ValidationTextBox" placeHolder="hint text">
		<label for="q03">NumberSpinner:</label>
		<input id="q03" data-dojo-type="dijit/form/NumberSpinner"
			name="age" class="small"
			data-dojo-props='
			promptMessage:"(optional) Enter an age between 0 and 120",
			maxLength:"3",
			constraints:{places:0,min:0,max:120},
			onChange:function(val){ console.log(val); },
			tooltipPosition:["above", "below"]
		'>
		<label for="date">Date:</label>
		<input id="date" data-dojo-type="dijit/form/DateTextBox"
			name="date" value="2008-12-31" onChange="console.log(arguments[0]);"
		>
		<label for="time">Time:</label>
		<input id="time" data-dojo-type="dijit/form/TimeTextBox"
			   name="time" value="T17:45:00" onChange="console.log(arguments[0]);"
		>

		<h1>Selects</h1>
		<label for="s">Select:</label>
		<select id="s" data-dojo-type="dijit/form/Select">
			<option value="TN">Tennessee</option>
			<option value="VA" selected="selected">Virginia</option>
			<option value="WA">Washington</option>
			<option value="FL">Florida</option>
			<option value="CA">California</option>
		</select>

		<label for="fs">FilteringSelect:</label>
		<select id="fs" aria-label="fs" data-dojo-type="dijit/form/FilteringSelect">
			<option value="AL">Alabama</option>
			<option value="AK">Alaska</option>
			<option value="AS">American Samoa</option>
			<option value="AZ">Arizona</option>
			<option value="AR">Arkansas</option>
			<option value="AE">Armed Forces Europe</option>
			<option value="AP">Armed Forces Pacific</option>
			<option value="AA">Armed Forces the Americas</option>
			<option value="CA" selected>California</option>
			<option value="CO">Colorado</option>
			<option value="CT">Connecticut</option>
			<option value="DE">Delaware</option>
			<option value="DC">District of Columbia</option>
			<option value="FM">Federated States of Micronesia</option>
			<option value="FL">Florida</option>
			<option value="GA">Georgia</option>
			<option value="GU">Guam</option>
			<option value="HI">Hawaii</option>
			<option value="ID">Idaho</option>
			<option value="IL">Illinois</option>
			<option value="IN">Indiana</option>
			<option value="IA">Iowa</option>
			<option value="KS">Kansas</option>
			<option value="KY">Kentucky</option>
			<option value="LA">Louisiana</option>
			<option value="ME">Maine</option>
			<option value="MH">Marshall Islands</option>
			<option value="MD">Maryland</option>
			<option value="MA">Massachusetts</option>
			<option value="MI">Michigan</option>
			<option value="MN">Minnesota</option>
			<option value="MS">Mississippi</option>
			<option value="MO">Missouri</option>
			<option value="MT">Montana</option>
			<option value="NE">Nebraska</option>
			<option value="NV">Nevada</option>
			<option value="NH">New Hampshire</option>
			<option value="NJ">New Jersey</option>
			<option value="NM">New Mexico</option>
			<option value="NY">New York</option>
			<option value="NC">North Carolina</option>
			<option value="ND">North Dakota</option>
			<option value="MP">Northern Mariana Islands</option>
			<option value="OH">Ohio</option>
			<option value="OK">Oklahoma</option>
			<option value="OR">Oregon</option>
			<option value="PA">Pennsylvania</option>
			<option value="PR">Puerto Rico</option>
			<option value="RI">Rhode Island</option>
			<option value="SC">South Carolina</option>
			<option value="SD">South Dakota</option>
			<option value="TN">Tennessee</option>
			<option value="TX">Texas</option>
			<option value="UT">Utah</option>
			<option value="VT">Vermont</option>
			<option value="VI">Virgin Islands, U.S.</option>
			<option value="VA">Virginia</option>
			<option value="WA">Washington</option>
			<option value="WV">West Virginia</option>
			<option value="WI">Wisconsin</option>
			<option value="WY">Wyoming</option>
		</select>

		<label for="ms">ms:</label>
		<select id="ms" multiple data-dojo-type="dijit/form/MultiSelect"
				name="ms" style="height:100px; width:175px;">
			<option value="TN" selected>Tennessee</option>
			<option value="VA">Virginia</option>
			<option value="WA">Washington</option>
			<option value="FL">Florida</option>
			<option value="CA">California</option>
		</select>

		<h1>HorizontalSlider</h1>
		<div id="slider1" data-dojo-type="dijit/form/HorizontalSlider" data-dojo-props='name:"horizontal1",
			value:10,
			maximum:100,
			minimum:0,
			pageIncrement:100,
			showButtons:true,
			intermediateChanges:true,
			slideDuration:500,
			style:{width:"100%", height:"20px"}
			'>
				<ol data-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props='container:"topDecoration", style:{height:"1.2em",fontSize:"75%"}, count:6, numericMargin:1'></ol>
				<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='container:"topDecoration", count:6, style:{height:"5px"}'></div>
				<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='container:"bottomDecoration", count:5, style:{height:"5px"}'></div>
				<ol data-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props='container:"bottomDecoration", style:{height:"1em",fontSize:"75%"}'>
					<li>lowest</li>
					<li>normal</li>
					<li>highest</li>
				</ol>
		</div>
	</body>
</html>
